<template>
     <!-- start 新建账号 -->
    <base-modal
        :show.sync="userDialogVisible"
        class="add-dialog-container service_body" 
        width="700px" 
        @closed="userDialogVisible = false"
        :title="$t('personal.updateMessage.title')"
    >
        <!-- <span class="base-import-title" slot="title"></span> -->
        <create-user-panel
            v-loading="loading"
            ref="createUserPanel"
            @submitStart="userAdd"
            :user-row="userRowStr"
            :account-info="accountInfo"
            key-from='user'
            :hiddencertificateList="true"
        ></create-user-panel>

        <div slot="footer" class="dialog-footer">
            <el-button 
                @click="userDialogVisible = false">{{ $t('common.base.cancel') }}
            </el-button>

            <el-button 
                :disabled="loading"
                type="primary" 
                @click="userDialogSubmit">{{ $t('common.base.confirm') }}
            </el-button>
        </div>

    </base-modal>
</template>

<script>
import { createAndAddDepartmentUser} from '@src/api/DepartmentApi';
import CreateUserPanel from '@src/modules/dept/component/CreateUserPanel.vue';
import { t } from '@src/locales'

export default {
    data(){
        return {
            loading:false
        }
    },

    props:{
        userRow:{
            type:Object,
            required:true,
        },

        value:{
            type:Boolean,
            required:true
        },
        user:{
            type:Object,
            required:true
        },
        accountInfo:{
            type:Object,
            required:false
        },
    },

    computed:{
        userDialogVisible:{
            get(){
                return this.value;
            },

            //setter 方法
            set(newValue){
                this.$emit('input',newValue)
                return newValue
            }
        },

        userRowStr(){
            return JSON.stringify(this.userRow)
        }
    },

    components:{
        CreateUserPanel
    },

    mounted(){
    },

    methods:{   

        userAdd(form = {}) {
            if(this.loading) return;
            let params = JSON.parse(JSON.stringify(form));
            if (!form.userId) {
                params.loginPassword = md5(params.pass);
            }
            params.roles = params.role.map(r => ({ id: r })) || [];

            this.loading = true;

            createAndAddDepartmentUser(params)
                .then(result => {
                    let isSucc = result.status == 0;

                    if (isSucc) {
                        this.userDialogVisible = false;
                        this.$emit("update")
                    }

                    this.$platform.notification({
                        title: isSucc ? t('common.base.success') : t('common.base.fail'),
                        message: isSucc ?  t('common.base.tip.operationSuccess') : result.message,
                        type: isSucc ? 'success' : 'error'
                    });
                })
                .catch(err => console.log(err))
                .finally(() => {
                    this.loading = false
                });
        },

        userDialogSubmit(){
            if(this.loading) return;
            this.$refs.createUserPanel.validate();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper{
    overflow: hidden;
}
// .base-modal-body{
//     padding-top:24px;
// }
::v-deep{
    // transform: translateY(-50%);
    // top: 50%;
    // margin-top:0 !important;
    // .el-dialog__body{
    //     max-height: calc(100vh - 160px);
    //     overflow: auto;
    // }
    // .el-dialog__headerbtn{
    //     top:0;
    // }
    .base-modal-body{
        padding-top:24px;
    }

}
</style>